<template>
	<view style="padding: 20rpx;font-size: 24rpx;">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view style="border-radius: 15rpx; background-color: #fff;padding: 10rpx 20rpx;">

			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="100" :label-style="{
				fontSize:'26rpx'
			}">
				<u-form-item label="发票类型" borderBottom customStyle="padding: 20px 0">
					<u--input value="电子发票" border="none" disabled disabledColor="#fff"></u--input>

				</u-form-item>
				<u-form-item label="发票金额" borderBottom customStyle="padding: 20px 0">
					<u--input v-model="price" border="none" disabled disabledColor="#fff"></u--input>

				</u-form-item>
				<u-form-item label="开票方式" borderBottom customStyle="padding: 20px 0">
					<u--input border="none" disabled disabledColor="#fff" value="商品明细"></u--input>

				</u-form-item>
				<u-form-item label="抬头类型" borderBottom prop="userInfo.type" :label-style="{
					
				fontSize:'24rpx',
				padding:'10rpx 0'
			}" customStyle="padding: 20px 0">
					<u-radio-group activeColor="rgb(199,161,123)" v-model="model1.userInfo.type" placement="row">
						<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.type">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="发票抬头" prop="userInfo.headtext" borderBottom ref="item1"
					customStyle="padding: 20px 0">
					<u--input v-model="model1.userInfo.headtext" border="none" placeholder="请填写抬头名称(必填)"></u--input>
				</u-form-item>
				<u-form-item label="纳税人识别号" v-if="model1.userInfo.type == 2" prop="userInfo.shibiecode" borderBottom
					customStyle="padding: 20px 0">
					<u--input v-model="model1.userInfo.shibiecode" border="none" placeholder="请填写纳税人识别号(必填)"></u--input>

				</u-form-item>

				<u-form-item label="邮箱地址" prop="userInfo.email" borderBottom ref="item1" customStyle="padding: 20px 0">
					<u--input v-model="model1.userInfo.email" border="none" placeholder="用于接收电子发票 (必填)"></u--input>
				</u-form-item>
				<view v-if="show">
					<u-form-item label="注册地址" prop="userInfo.address" borderBottom ref="item1"
						customStyle="padding: 20px 0">
						<u--input v-model="model1.userInfo.address" border="none" placeholder="(选填)"></u--input>
					</u-form-item>
					<u-form-item label="注册电话" prop="userInfo.mobie" borderBottom ref="item1"
						customStyle="padding: 20px 0">
						<u--input v-model="model1.userInfo.mobie" border="none" placeholder="(选填)"></u--input>
					</u-form-item>
					<u-form-item label="开户银行" prop="userInfo.bankname" borderBottom ref="item1"
						customStyle="padding: 20px 0">
						<u--input v-model="model1.userInfo.bankname" border="none" placeholder="(选填)"></u--input>
					</u-form-item>
					<u-form-item label="银行账户" prop="userInfo.bankcode" borderBottom ref="item1"
						customStyle="padding: 20px 0">
						<u--input v-model="model1.userInfo.bankcode" border="none" placeholder="(选填)"></u--input>
					</u-form-item>
				</view>

				<view @click="show = !show"
					style="text-align: center;padding: 30rpx;display: flex;justify-content: center;align-items: center;">
					其他发票信息 <span class="topjiantou" :class="show ? 'active':''"
						style="border-left: 2rpx solid #000;border-top: 2rpx solid #000;width: 10rpx;height: 10rpx;display: inline-block;"></span>
				</view>

			</u--form>
		</view>
		<view style="color: #909090;padding: 20rpx;line-height: 30rpx;">
			温馨提示:
			<view>
				1.应国家税务总局要求，您若开具增值税普通发票，须同时提供企业抬头及纳税人识别号，否则发票将无法用于企业报销
				<br>
				<br>
				<br>
				2.配合国家税务总局推进全面数字化电子发票，发票处理时长为1-3个工作日，请耐心等候
			</view>

		</view>
		<view class="btn" :class="active?'active':''" @click="submit">
			提交申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				price: '222',
				isdefault: '',
				orderid: '',
				checkboxList1: [{
					name: '设为默认发票抬头',
					id: 22,
					disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				radiolist1: [{
						name: '个人/非企业单位',
						type: 1,
						disabled: false
					},
					{
						name: '企业',
						type: 2,
						disabled: false
					}
				],
				active: false,
				isdefault: '',
				model1: {
					userInfo: {
						type: 1,
						headtext: '',
						email: '',
						address: '',
						mobie: '',
						bankname: '',
						bankcode: '',
						shibiecode: ''
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.headtext': {
						type: 'string',
						required: true,
						message: '请填写抬头名称',
						trigger: ['blur', 'change']
					},
					// 'userInfo.type': {
					// 	type: 'string',
					// 	max: 1,
					// 	// required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
					'userInfo.email': {
						type: 'string',
						required: true,
						message: '请输入邮箱',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		watch: {
			model1: {
				handler: function(n, d) {

					if (n.userInfo.type == 2) {
						if (n.userInfo.headtext && n.userInfo.email && n.userInfo.shibiecode) {
							this.active = true
						} else {
							this.active = false
						}
					} else {

						if (n.userInfo.headtext && n.userInfo.email) {
							this.active = true
						} else {
							this.active = false
						}

					}
				},
				deep: true,
				uid: ''
			}
		},
		async onLoad({
			id
		}) {
			this.orderid = id
			let res2 = await this.$api.getorderDet({
				id
			})
			this.price = res2.data.pay_price
			console.log(res2);

			this.uid = uni.getStorageSync('userId')

			let res = await this.$api.getmyfh({})
			console.log(res);
		},
		methods: {
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
				})
			},
			async submit() {
				if (this.active) {
					let res = await this.$api.applyfapiao({
						...this.model1.userInfo,
						price: this.price,
						uid: this.uid,
						orderid: this.orderid,
						isdefault: this.isdefault[0]
					})
					if (res.msg == '此订单已开票') {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					} else {
						uni.showToast({

							title: res.msg
						})
					}

					setTimeout(() => {
						// console.log(2222);
						uni.navigateBack({
							delta: 2
						});

					}, 500)
				}
				console.log(2222);
				// this.$refs.uForm.validate().then(res => {
				// 	this.active = true
				// }).catch(errors => {
				// 	uni.$u.toast('请输入内容')
				// })
			}

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style>
	.topjiantou {
		transform: rotate(225deg);
		margin-left: 20rpx;
		transition: all .3s
	}

	.topjiantou.active {
		transform: rotate(45deg);
	}

	.btn {
		position: fixed;
		bottom: 20rpx;
		background-color: rgb(0, 0, 0);
		width: 600rpx;
		color: #fff;
		line-height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);

	}

	.btn.active {
		background-color: blue;
	}
</style>